<template>
  <BasePage title="上报时间设置" description="设置全校上报时间">
    <!-- 当前设置 -->
    <StatusCard 
      status="info" 
      title="当前上报时间" 
      description="以下为当前生效的上报时间设置"
    >
      <div class="mt-4 space-y-3 text-sm">
        <div class="flex justify-between">
          <span class="text-gray-500">上报开始时间</span>
          <span class="font-medium">{{ currentSettings.startTime }}</span>
        </div>
        <div class="flex justify-between">
          <span class="text-gray-500">上报截止时间</span>
          <span class="font-medium">{{ currentSettings.endTime }}</span>
        </div>
        <div class="flex justify-between">
          <span class="text-gray-500">生效日期</span>
          <span class="font-medium">{{ currentSettings.effectiveDate }}</span>
        </div>
        <div class="flex justify-between">
          <span class="text-gray-500">设置人</span>
          <span class="font-medium">{{ currentSettings.setBy }}</span>
        </div>
        <div class="flex justify-between">
          <span class="text-gray-500">设置时间</span>
          <span class="font-medium">{{ currentSettings.setAt }}</span>
        </div>
      </div>
    </StatusCard>
    
    <!-- 修改设置表单 -->
    <div class="mt-6 bg-white rounded-lg shadow-sm p-4">
      <h3 class="text-lg font-medium text-gray-800 mb-4">修改上报时间</h3>
      
      <BaseForm @submit="updateSettings">
        <div class="form-group">
          <label class="form-label">上报开始时间</label>
          <input 
            v-model="newSettings.startTime" 
            type="time" 
            class="form-input" 
            required
          >
        </div>
        
        <div class="form-group">
          <label class="form-label">上报截止时间</label>
          <input 
            v-model="newSettings.endTime" 
            type="time" 
            class="form-input" 
            required
          >
        </div>
        
        <div class="form-group">
          <label class="form-label">生效日期</label>
          <input 
            v-model="newSettings.effectiveDate" 
            type="date" 
            class="form-input" 
            required
          >
        </div>
        
        <div class="form-group">
          <label class="form-label">备注说明</label>
          <textarea 
            v-model="newSettings.remarks" 
            class="form-input" 
            rows="3" 
            placeholder="请输入备注说明（可选）"
          ></textarea>
        </div>
      </BaseForm>
    </div>
    
    <!-- 历史设置记录 -->
    <div class="mt-6 bg-white rounded-lg shadow-sm overflow-hidden">
      <h3 class="text-lg font-medium text-gray-800 p-4 border-b border-gray-100">历史设置记录</h3>
      <div class="divide-y divide-gray-100">
        <div 
          v-for="(record, index) in historyRecords" 
          :key="index"
          class="p-4"
        >
          <div class="flex justify-between items-start">
            <div>
              <div class="font-medium text-gray-800">{{ record.effectiveDate }} 生效</div>
              <div class="text-sm text-gray-500 mt-1">{{ record.startTime }} - {{ record.endTime }}</div>
            </div>
            <div class="text-xs text-gray-500">
              {{ record.setAt }}
            </div>
          </div>
          <div class="text-sm text-gray-500 mt-2">
            设置人: {{ record.setBy }}
          </div>
          <div v-if="record.remarks" class="text-sm text-gray-600 mt-2 bg-gray-50 p-2 rounded">
            {{ record.remarks }}
          </div>
        </div>
      </div>
    </div>
    
    <!-- 确认弹窗 -->
    <div v-if="showConfirmDialog" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
      <div class="bg-white rounded-lg max-w-sm w-full p-5">
        <h3 class="text-lg font-medium text-gray-800 mb-3">确认修改</h3>
        <p class="text-gray-600 mb-4">您确定要修改上报时间设置吗？此操作将影响全校上报。</p>
        <div class="flex space-x-3">
          <button 
            @click="confirmUpdate" 
            class="flex-1 py-2 bg-green-500 text-white rounded-lg font-medium hover:bg-green-600 transition-colors"
          >
            确认
          </button>
          <button 
            @click="cancelUpdate" 
            class="flex-1 py-2 bg-gray-100 text-gray-700 rounded-lg font-medium hover:bg-gray-200 transition-colors"
          >
            取消
          </button>
        </div>
      </div>
    </div>
    
    <!-- 成功提示 -->
    <div v-if="showSuccessDialog" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
      <div class="bg-white rounded-lg max-w-sm w-full p-5 text-center">
        <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
          <CheckCircle class="w-8 h-8 text-green-500" />
        </div>
        <h3 class="text-lg font-medium text-gray-800 mb-2">设置成功</h3>
        <p class="text-gray-600 mb-4">上报时间设置已成功更新</p>
        <button 
          @click="showSuccessDialog = false" 
          class="w-full py-2 bg-green-500 text-white rounded-lg font-medium hover:bg-green-600 transition-colors"
        >
          确定
        </button>
      </div>
    </div>
  </BasePage>
</template>

<script setup>
import { ref } from 'vue';
import BasePage from '../../components/BasePage.vue';
import BaseForm from '../../components/BaseForm.vue';
import StatusCard from '../../components/StatusCard.vue';
import { CheckCircle } from 'lucide-vue-next';

// 当前设置
const currentSettings = ref({
  startTime: '08:00',
  endTime: '10:00',
  effectiveDate: '2023-05-01',
  setBy: '王校长',
  setAt: '2023-04-28 14:30'
});

// 新设置
const newSettings = ref({
  startTime: '08:00',
  endTime: '10:00',
  effectiveDate: '',
  remarks: ''
});

// 历史记录
const historyRecords = ref([
  {
    startTime: '08:00',
    endTime: '10:00',
    effectiveDate: '2023-05-01',
    setBy: '王校长',
    setAt: '2023-04-28 14:30',
    remarks: '新学期开始，调整上报时间'
  },
  {
    startTime: '07:30',
    endTime: '09:30',
    effectiveDate: '2023-03-01',
    setBy: '李副校长',
    setAt: '2023-02-25 10:15',
    remarks: ''
  },
  {
    startTime: '08:30',
    endTime: '10:30',
    effectiveDate: '2022-09-01',
    setBy: '王校长',
    setAt: '2022-08-28 16:45',
    remarks: '秋季学期开始，调整上报时间'
  }
]);

// 确认弹窗
const showConfirmDialog = ref(false);
const showSuccessDialog = ref(false);

// 更新设置
const updateSettings = () => {
  // 显示确认弹窗
  showConfirmDialog.value = true;
};

// 确认更新
const confirmUpdate = async () => {
  // 模拟API请求
  await new Promise(resolve => setTimeout(resolve, 800));
  
  // 更新当前设置
  const now = new Date();
  const formattedDate = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`;
  const formattedTime = `${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}`;
  
  // 添加到历史记录
  historyRecords.value.unshift({
    startTime: newSettings.value.startTime,
    endTime: newSettings.value.endTime,
    effectiveDate: newSettings.value.effectiveDate,
    setBy: '王校长',
    setAt: `${formattedDate} ${formattedTime}`,
    remarks: newSettings.value.remarks
  });
  
  // 更新当前设置
  currentSettings.value = {
    startTime: newSettings.value.startTime,
    endTime: newSettings.value.endTime,
    effectiveDate: newSettings.value.effectiveDate,
    setBy: '王校长',
    setAt: `${formattedDate} ${formattedTime}`
  };
  
  // 关闭确认弹窗
  showConfirmDialog.value = false;
  
  // 显示成功提示
  showSuccessDialog.value = true;
  
  // 重置表单
  newSettings.value = {
    startTime: currentSettings.value.startTime,
    endTime: currentSettings.value.endTime,
    effectiveDate: '',
    remarks: ''
  };
  
  // 在实际应用中，这里会发送请求到后端保存设置
  console.log('上报时间设置已更新:', currentSettings.value);
};

// 取消更新
const cancelUpdate = () => {
  showConfirmDialog.value = false;
};
</script>